<template>
    <a-modal :open="visible" :title="form.blfunduseid ? '编辑' : '添加'" width="700px" forceRender :maskClosable="false"
        @ok="onSubmit" @cancel="onClose">
        <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 6 }">
            <a-form-item label="基金用途名称" name="bluse">
                <a-input v-model:value="form.bluse" placeholder="请输入基金用途名称" />
            </a-form-item>
            <a-form-item label="基金用途编号" name="blusenum">
                <a-input v-model:value="form.blusenum" :disabled="form.blfunduseid ? true : false"
                    placeholder="请输入基金用途编号" />
            </a-form-item>
            <a-form-item label="基金用途描述" name="bldescription">
                <a-textarea v-model:value.trim="form.bldescription" placeholder="请输入基金用途描述"
                    :auto-size="{ minRows: 2, maxRows: 5 }" />
            </a-form-item>
        </a-form>
        <template #footer>
            <a-space>
                <a-button @click="onClose">取消</a-button>
                <a-button type="primary" @click="onSubmit">保存</a-button>
            </a-space>
        </template>
    </a-modal>
</template>

<script setup>
    import { message } from 'ant-design-vue';
    import _ from 'lodash';
    import { nextTick, reactive, ref, defineProps } from 'vue';
    import { DonationApi } from '/@/api/basicManage/DonationManage/Dona-api';
    import AreaCascader from '/@/components/framework/area-cascader/index.vue';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import Upload from '/@/components/support/file-upload/index.vue';
    import { regular } from '/@/constants/regular-const';
    import { smartSentry } from '/@/lib/smart-sentry';
    import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';

    defineExpose({
        showModal,
    });

    const emit = defineEmits(['refresh']);

    // --------------------- modal 显示与隐藏 ---------------------
    // 是否展示
    const visible = ref(false);

    function showModal(data) {
        Object.assign(form, formDefault);
        if (data.blfunduseid && !_.isEmpty(data)) {
            Object.assign(form, data);
        }
        visible.value = true;
    }

    function onClose() {
        visible.value = false;
    }


    // --------------------- 表单 ---------------------

    //  组件
    const formRef = ref();

    const formDefault = {
        blfunduseid: undefined,
        bldescription: undefined,
        bluse: undefined,
        blusenum: undefined,
    };
    let form = reactive({ ...formDefault });
    const rules = {
        bluse: [{ required: true, message: '请输入基金用途名称' }],
        blusenum: [{ required: true, message: '请输入基金用途编号' }],
        bldescription: [{ required: false, message: '请输入基金用途描述' }],
    };

    function onSubmit() {
        formRef.value
            .validate()
            .then(async () => {
                SmartLoading.show();
                try {
                    if (form.blfunduseid) {
                        await DonationApi.foundationUpdate(form);
                    } else {
                        await DonationApi.foundationAdd(form);
                    }
                    message.success(`${form.blfunduseid ? '修改' : '添加'}成功`);
                    emit('refresh');
                    onClose();
                } catch (error) {
                    smartSentry.captureError(error);
                } finally {
                    SmartLoading.hide();
                }
            })
            .catch((error) => {
                message.error('参数验证错误，请仔细填写表单数据!');
            });
    }

</script>

<style lang="less" scoped>
    .form-width {
        width: 100% !important;
    }

    .footer {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    :deep(.ant-card-body) {
        padding: 10px;
    }
</style>